import React from "react";
import SearchHeader from "./SearchHeader";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import "../style/style.less";
import ThePagination from "../../../components/ThePagination";
import { apiGetGoodsMemberNoticePage, apiGoodsMemberNoticeNotify } from '@/request/mall'
import TheImage from '@/components/TheImage'
import { Space } from "antd";
import { exportSheetTable } from '@/utils/exportTable'
class List extends React.Component {
  state = {
    down_loading: false,

    columns: [
      // {
      //   title: "用户ID",
      //   dataIndex: "memberId",
      //   key: "memberId",
      // },
      {
        title: "订阅商品",
        dataIndex: "goodsName",
        key: "goodsName",
      },
      // {
      //   title: "订阅时间",
      //   dataIndex: "createTime",
      //   key: "createTime",
      // },
      {
        title: "商品规格",
        dataIndex: "goodsSkuName",
        key: "goodsSkuName",
        
      },
      {
        title: "物料ID",
        dataIndex: "materialId",
        key: "materialId",
        
      },
      {
        title: "库存数",
        dataIndex: "stock",
        key: "stock",
      },
      {
        title: "订阅会员量",
        dataIndex: "notifyMemberCount",
        key: "notifyMemberCount",
      },
      {
        title: "操作",
        // width: 300,
        render: (text, render) => {
          console.log(render);
          return (
            <div>
              {/* <TheButton haspermi={['mall:list:recommend']} onClick={() => this.offRecommend(render.goodsId, 'N')}>不推荐</TheButton> */}
              <TheButton haspermi={['mall:list:notify']} onClick={() => this.goNotify(render.goodsId,render.goodsSkuId,render.storeId)} >通知</TheButton>
            </div>
          );
        },
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    searchValue: {}
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { pageData, searchValue } = this.state
    let res = await apiGetGoodsMemberNoticePage({ ...pageData, ...searchValue, })
    if (res.code === 0 && res.data) {
      this.setState({ dataSource: res.data, pageData: { pageNo: res.pageNo, pageSize: res.pageSize }, total: res.totalCount })
    }
  }
  getValue = (value) => {
    console.log(value);
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }
  goDetail = (goodsId) => {
    this.props.history.push(`/mall/list/detail/${goodsId}`);
  };
  goEvaluate = (goodsId, storeName, storeId) => {
    this.props.history.push(`/mall/list/evaluate/${goodsId}/${encodeURIComponent(storeName)}/${storeId}`);
  };
  goNotify = (goodsId, goodsSkuId, storeId) => {
    
    React.$confirm({
      title: "您确认发送到货提醒通知吗？",
      onOk: async () => {
        await apiGoodsMemberNoticeNotify({ goodsId, goodsSkuId: goodsSkuId === null ? '' : goodsSkuId, storeId }).then(
          (res) => {
            console.log(res);
            if (res.code === 0) {
              React.$message({
                type: 'info',
                content: '发送成功'
              })
            }
          }
        )
        this.getData()
      },
    });
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };
  toExportTable = async () =>{
    this.setState({ down_loading: true })
    await React.$post("/admin/goodsMemberNotice/export").then(res => {
      if (res.code === 0 && res.data.length > 0) {
        let tH_data = [
          {
            title: '到货提醒',
            prop: '',
            children: [
              { prop: 'memberId', title: '用户ID' },
              { prop: 'nickName', title: '用户昵称' },
              { prop: 'memberMobile', title: '手机号' },
              { prop: 'createTime', title: '订阅时间' },
              { prop: 'goodsName', title: '订阅商品' },
              { prop: 'goodsValue', title: '商品规格' },
              { prop: 'materialId', title: '物料ID' },
              { prop: 'stock', title: '库存数' , valueType:'number'},
            ]
          }
        ]
        let tB_data = res.data.map(item => {

          return {
            memberId: item.memberId,
            nickName: item.nickName,
            memberMobile: item.memberMobile,
            createTime: item.createTime,
            goodsName: item.goodsName,
            goodsValue: item.goodsValue,
            materialId: item.materialId,
            stock: item.stock,
          }

        })
        this.setState({ down_loading: false })
        exportSheetTable({
          fileName: '商城商品列表', tH_data: tH_data, tB_data: tB_data, isSheet: true, merge: false, mergeProp:[]
        })

      } else {
        React.$message({
          type: 'warning',
          content: '导出操作失败,请重试'
        })
        this.setState({ down_loading: false })

      }
    }).catch(err => {
      React.$message({
        type: 'warning',
        content: '导出操作失败,请重试'
      })
      this.setState({ down_loading: false })
    })
  }
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total, down_loading
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"} >
        <SearchHeader history={this.props.history} getValue={this.getValue} loading={down_loading} />
        <div style={{margin:'5px'}}>
        <TheButton size="middle" type="default" haspermi={['mall:sendList:export']} onClick={() => this.toExportTable()} >导出</TheButton>
        </div>
        
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: '63vh' }}
            columns={columns}
            dataSource={dataSource}
          />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
    );
  }
}

export default List;
